<template>
	<view>

		<view v-if="!refresh">
			<!-- <u-sticky offset-top="-110">
			<view class="sticky"> -->
			<u-row>
				<u-col span="3" offset="1" style="margin-top: 40rpx;">
					<text class="course">课程</text>
				</u-col>
				<u-col span="4" offset="4" style="margin-top: 40rpx;">
					<u-icon @tap="gotoPlan()" style="margin-right: 50rpx;" name="calendar" color="#909399" size="60"></u-icon>
					<u-icon @tap="gotoDowload()" style="margin-right: 20rpx;" name="download" color="#909399" size="60"></u-icon>
				</u-col>
			</u-row>
			<!-- 	</view>
		</u-sticky> -->

			<!-- 登录显示的组件：用是否有用户名判断 -->
			<view v-if="isLogin">

				<view v-if="isLoad">
					<!-- 有学习的课程 -->
					<view v-if="isStudyCourse">
						<!-- 				<u-sticky> -->
						<!-- <view class="sticky"> -->
						<view>
							<u-row style="margin-top: -1rpx">
								<view>
									<text class="subTitle">好课不怕晚</text>
									<u-image class="uImage" @tap="gotoDetail()" border-radius="15rpx" width="700rpx" height="300rpx" shape="square"
									 src="../../static/study/studyTop.jpg"></u-image>
								</view>
							</u-row>
							<view class="countTip">我的课程<text style="margin-left: 40rpx;">({{myCourse.length}})</text></view>
						</view>
						<!-- </u-sticky> -->
						<view v-for="(item, index) in myCourse" :key="index">
							<u-card :border="false" :foot-border-top="false" padding="10rpx" margin="10rpx">
								<view class="" slot="body">
									<view class="u-body-item">
										<u-row style="position: relative;" @tap="courseDetails(item.id)">
											<u-col :span="6" @tap="courseDetails(item.id)">
												<u-image border-radius="10rpx" width="100%" height="200rpx" :src="url + 'courseImages/' + item.courseImage"></u-image>
											</u-col>
											<u-col :span="6" @tap="courseDetails(item.id)">
												<view class="textStyle">
													<view class="titleStyle">{{item.courseName}}</view>
													<view class="schoolStyle">{{item.schoolName}}</view>
													<!-- <view class="courseStyle">更新到{{item.upLoad}}课时</view> -->
												</view>
											</u-col>
										</u-row>
									</view>
								</view>
							</u-card>
						</view>
					</view>
					<!-- 无学习的课程 -->
					<view v-else>
						<view class="viewlogo">
							<u-image class="logo" width="300rpx" height="300rpx" src="../../static/study.png"></u-image>
						</view>
						<view class="tipTextNoneCourse">还没有学习的课程~</view>
					</view>
				</view>
				<view v-else>
					<view class="viewlogo">
						<u-loading style="margin-left: 360rpx; margin-top: 400rpx;" size="60"></u-loading>
					</view>
					<view style="color: #909399; font-size: 40rpx; font-family: 'Courier New', Courier, monospace;margin-left: 320rpx;">加载中~</view>
				</view>

			</view>
			<!-- 未登录显示的组件 -->
			<view v-else>
				<view class="viewlogo">
					<u-image class="logo" width="300rpx" height="300rpx" src="../../static/study.png"></u-image>
				</view>
				<view class="tipText">您还未登录~</view>
				<button class="loginButton" @tap="gotoLogin()">立即登录</button>
			</view>
		</view>

	</view>
</template>
import uniIcons from "@/components/uni-icons/uni-icons.vue";
<script>
	import {
		getStudentCourseUniapp
	} from '@/api/modules/course.js'

	export default {
		data() {
			return {
				isLoad: false, // 是否正在加载
				refresh: false, //刷新
				url: this.GOBAL.baseURL,
				isLogin: false,
				isStudyCourse: false, // 是否有学习的课程
				courseCount: 0,
				myCourse: [
					// {
					// 	title: 'Python',
					// 	school: '北京理工大学',
					// 	upLoad: 25,
					// 	courseImage: 'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg'
					// },
					// {
					// 	title: 'Python',
					// 	school: '北京理工大学',
					// 	upLoad: 25,
					// 	courseImage: 'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg'
					// },
					// {
					// 	title: 'Python',
					// 	school: '北京理工大学',
					// 	upLoad: 25,
					// 	courseImage: 'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg'
					// },
					// {
					// 	title: 'Python',
					// 	school: '北京理工大学',
					// 	upLoad: 25,
					// 	courseImage: 'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg'
					// },
					// {
					// 	title: 'Python',
					// 	school: '北京理工大学',
					// 	upLoad: 25,
					// 	courseImage: 'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg'
					// },
					// {
					// 	title: 'Python',
					// 	school: '北京理工大学',
					// 	upLoad: 25,
					// 	courseImage: 'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg'
					// },
					// {
					// 	title: 'Python',
					// 	school: '北京理工大学',
					// 	upLoad: 25,
					// 	courseImage: 'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg'
					// },
					// {
					// 	title: 'Python',
					// 	school: '北京理工大学',
					// 	upLoad: 25,
					// 	courseImage: 'https://img11.360buyimg.com/n7/jfs/t1/94448/29/2734/524808/5dd4cc16E990dfb6b/59c256f85a8c3757.jpg'
					// },
				],
			}
		},
		onPullDownRefresh() {
			let that = this;

			that.refresh = true;
			that.myCourse = []
			that.getStudyCourse();
			that.$nextTick(function() {
				that.refresh = false;
				uni.stopPullDownRefresh();
			})
		},
		methods: {
			courseDetails(params) {
				// console.log(params)
				uni.navigateTo({
					url: '../course/courseDetails?courseID=' + params,
					success() {
						uni.setStorageSync("courseId", params)
					}
				});
			},
			gotoPlan: function() {
				//跳转到计划界面，否则到登录界面
				if (this.isLogin) {
					console.log('定制你的计划')
				} else {
					uni.navigateTo({
						url: '../account/basicLogin/login'
					});
				}
			},
			gotoDowload: function() {
				//跳转到离线下载界面，否则到登录界面
				if (this.isLogin) {
					console.log('离线下载')
				} else {
					uni.navigateTo({
						url: '../account/basicLogin/login'
					});
				}
			},
			gotoLogin: function() {
				uni.navigateTo({
					url: '../account/basicLogin/login'
				});
			},
			getStudyCourse() {
				let that = this;

				//获取本地缓存，如果成功就是显示登录后的组件，否则是未登录的
				uni.getStorage({
					key: 'userName',
					success: function(res) {
						that.isLogin = true;

						// 获取加密的邮箱，以获取全部学习的课程
						uni.getStorage({
							key: 'loginStorage',
							success: function(res) {

								let data = {
									userID: res.data
								}
								getStudentCourseUniapp(data)
									.then(resp => {
										// console.log(resp)
										// 没有正在学习的课程
										if (resp.data[0].isNull == "true") {
											that.isStudyCourse = false
										} else {
											that.myCourse = resp.data

											that.isStudyCourse = true
										}
										that.isLoad = true
									})
									.catch(resp => {})
							}
						});
					},
					fail: function(res) {
						// console.log("未登陆")
						that.isLogin = false;
					}
				});
			},
		},
		onShow() {
			let that = this;

			// console.log("视图更新")
			//获取本地缓存，如果成功就是显示登录后的组件，否则是未登录的
			uni.getStorage({
				key: 'userName',
				success: function(res) {
					that.isLogin = true;

					// 获取加密的邮箱，以获取全部学习的课程
					uni.getStorage({
						key: 'loginStorage',
						success: function(res) {

							let data = {
								userID: res.data
							}
							getStudentCourseUniapp(data)
								.then(resp => {
									// console.log(resp)
									// 没有正在学习的课程
									if (resp.data[0].isNull == "true") {
										that.isStudyCourse = false
									} else {
										that.myCourse = resp.data

										that.isStudyCourse = true
									}
									that.isLoad = true
								})
								.catch(resp => {})
						}
					});
				},
				fail: function(res) {
					// console.log("未登陆")
					that.isLogin = false;
				}
			});
		},
	}
</script>

<style>
	/* 主标题：课程样式 */
	.course {
		font-weight: bold;
		font-size: 50rpx;
		color: #00a0ff;
		/* position: absolute; */
	}

	/* 图标样式 */
	.iconStyle {
		margin-right: 40rpx;
		/* position: absolute; */
	}

	/* 未登录图片 */
	.logo {
		margin-top: 300rpx;
		margin-left: 225rpx;
	}

	/* 未登录：按钮上方提示 */
	.tipText {
		font-size: 40rpx;
		font-family: 'Courier New', Courier, monospace;
		margin-left: 270rpx;
		margin-top: 20rpx;
	}

	/* 登陆了没有正在学习的课程 */
	.tipTextNoneCourse {
		font-size: 40rpx;
		font-family: 'Courier New', Courier, monospace;
		margin-left: 220rpx;
		margin-top: 20rpx;
	}

	/* 副标题：好课...样式 */
	.subTitle {
		margin-left: 45rpx;
		font-weight: bold;
		color: #F29100;
		font-size: 40rpx;
	}

	.loginButton {
		width: 250rpx;
		margin-left: 255rpx;
		margin-top: 20rpx;
		color: #F8F8F8;
		background-color: #00a0ff;
	}

	/* 吸顶样式 */
	.sticky {
		display: block;
		background-color: #F8F8F8;
		margin-top: 0rpx;
	}

	/* 我的课程样式 */
	.countTip {
		margin: 45rpx;
		font-weight: bold;
		color: # #000000;
		font-size: 40rpx;
		padding-bottom: 20rpx;
	}

	.uImage {
		margin-left: 25rpx;
		margin-top: 20rpx;
	}

	.u-card-wrap {
		background-color: $u-bg-color;
		padding: 1px;
	}

	/* 卡片样式 */
	.u-body-item {
		font-size: 32rpx;
		color: #333;
		padding: 20rpx 10rpx;
	}

	.u-body-item image {
		width: 120rpx;
		height: 120rpx;
		border-radius: 8rpx;
		margin-left: 12rpx;
	}

	/* 左边文字显示样式 */
	.textStyle {
		margin-left: 30rpx;
	}

	.titleStyle {
		font-size: 33rpx;
		position: absolute;
		top: 0rpx;
	}

	.schoolStyle {
		margin-top: 30rpx;
		font-size: 25rpx;
		position: absolute;
		bottom: 10rpx;
	}

	.courseStyle {
		margin-top: 30rpx;
		font-size: 15rpx;
	}

	html {
		overflow-y: scroll;
	}
</style>
